<template>
  <div v-loading="loading" class="container">
    <el-form ref="form" :inline="true" label-position="left" size="mini">
      <el-form-item label="实例:">
        <el-select
          v-model="dbSelectCondition"
          style="min-width: 260px"
          clearable
          filterable
          placeholder="请选择实例"
        >
          <el-option
            v-for="item in dbSelecteds"
            :key="item.id"
            :label="item.tags + '|' + item.host"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="时间选择:">
        <div style="align-items: center">
          <el-date-picker
            v-model="dateSelectCondition"
            style="width: 160px"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="selecteTime"
          />
          <el-time-picker
            v-model="timeSelectCondition"
            style="margin-left: 5px"
            is-range
            format="HH:mm"
            value-format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            @change="selecteTime"
          />
        </div>

      </el-form-item>

    </el-form>

    <div style="display: flex; flex-direction: row; height: calc(100vh - 130px); overflow-y: auto">
      <div style="display: flex; flex-direction: column; width: 60%; height: 100%; margin-right: 15px">
        <el-card shadow="always" style="width: 100%;">

          <div style="display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap">
            <div class="card-header-title" style="display: flex; flex-direction: row; align-items: center; flex-wrap: wrap">SQL统计
              <span><div style="color: #999999; font-size: 12px; margin-left: 10px">(可框选该图表与其它图表联动)</div></span></div>
            <div style="color: #999999; font-size: 12px;"> 所选时间：{{ sqlQueryCoordRangeStart }} ~ {{ sqlQueryCoordRangeEnd }}</div>
          </div>

          <el-divider />
          <VChart ref="sqlQueryChart" class="sqlQueryChart" :option="sqlQueryChartOption" autoresize @brushEnd="brushEnd" />
        </el-card>

        <el-card class="slowSqlTableCard" shadow="always" style="margin-top: 20px; overflow: hidden">
          <el-table
            :data="tableData"
            border
            header-align="center"
            style="min-width: 300px; height: 100%"
            size="mini"
            height="100%"
          >
            <el-table-column prop="fingerprint" fixed="left" min-width="200" label="SQL语句" align="center" show-overflow-tooltip />
            <el-table-column prop="db_max" min-width="90" label="数据库" align="center" />
            <el-table-column prop="ts_cnt" sortable min-width="100" label="执行次数" align="center" />
            <el-table-column prop="Query_time_sum" sortable min-width="90" label="总耗时" align="center" />
            <el-table-column prop="Query_time_max" sortable min-width="120" label="最大执行时间" align="center" />
            <el-table-column prop="Lock_time_max" sortable min-width="130" label="最大锁等待时间" align="center" />
            <el-table-column prop="Rows_examined_max" sortable min-width="120" label="最大扫描行数" align="center" />
            <el-table-column label="操作" align="center" fixed="right" min-width="80">
              <template slot-scope="scope">
                <el-button size="mini" :disabled="!(queriesHashData.indexOf(scope.row.sample) < 0)" type="primary" @click="add(scope.row.sample)">添加
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            style="margin-top: 5px"
            background=""
            layout="prev, pager, next"
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="totalItems"
            @current-change="curPageChange"
          />
        </el-card>

      </div>

      <el-card class="workloadCard" shadow="always" style="width: 40%;">
        <div class="card-header-title">负载</div>
        <el-divider class="divider" />
        <div class="index" style="height: 100%">
          <el-table
            :data="queries"
            style="width: 100%; max-height: 40%"
            empty-text="请添加语句"
            :show-header="false"
            height="40%"
            cell-class-name="table-column"
          >
            <el-table-column
              fixed
              prop="query"
              label="语句"
              height="40px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              width="90"
            >
              <template slot-scope="scope">
                <el-popover
                  :ref="`edit-query-popover-${scope.$index}`"
                  placement="right"
                  width="400"
                  trigger="manual"
                >
                  <el-input v-model="editQuery" type="textarea" :autosize="{ minRows: 2, maxRows: 20}" />
                  <el-button type="text" size="small" @click="scope._self.$refs[`edit-query-popover-${scope.$index}`].doClose()">
                    取消
                  </el-button>
                  <el-button type="text" size="small" @click.native.prevent="saveEditRow(scope.$index, queries), scope._self.$refs[`edit-query-popover-${scope.$index}`].doClose()">
                    保存
                  </el-button>
                  <el-button slot="reference" style="color: #e6a23c" type="text" size="small" @click.native.prevent="editRow(scope, queries)">
                    编辑
                  </el-button>
                </el-popover>
                <el-button style="margin-left: 5px; color: #f56c6c" type="text" size="small" @click.native.prevent="deleteRow(scope.$index, queries)">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            style="width: 100%; height: 20px; margin-top: 10px; background: white; display: flex; flex-direction: row; justify-content: flex-end;
          align-items: center"
          >
            <el-popover
              placement="right"
              width="800"
              trigger="hover"
            >
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item v-for="(item, index) in workloadData" :key="index" class="workload-el-collapse-item" :title="item.name" :name="index">
                  <div :key="'use' + index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end">
                    <el-button style="margin: 0 10px" size="small" type="text" @click="userWorkload(item)">使用该负载</el-button>
                  </div>
                  <el-table
                    :data="item.queries"
                    :show-header="false"
                    :height="item.queries.length < 6 ? item.queries.length*60 : 360"
                    cell-class-name="table-column"
                  >
                    <el-table-column
                      prop="query"
                      label="语句"
                      height="40px"
                      :show-overflow-tooltip="true"
                    />
                  </el-table>
                </el-collapse-item>
              </el-collapse>
              <el-button slot="reference" size="mini" type="text" @click="addInputSal()">加载负载</el-button>
            </el-popover>

            <el-button style="margin-left: 10px" size="mini" type="text" :disabled="queries.length === 0" @click="onClickSaveWorkload">保存负载</el-button>
          </div>
          <el-divider class="divider" />
          <div style="display: flex; flex-direction: column; font-size: 12px; color: #666666">
            <div style="display: flex; flex-direction: column; justify-content: flex-start; margin: 10px;">
              <div>
                请在输入框内输入SQL语句，多语句以;分割
              </div>
              <el-input
                v-model="sqlsInput"
                style="margin: 5px 0"
                type="textarea"
                :rows="5"
                resize="none"
                placeholder="请输入SQL"
              />
              <el-button style="width: 80px" size="mini" type="primary" @click="addInputSal()">添加</el-button>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: flex-start; margin: 10px; align-items: center;">
              <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 15px;">
                索引上限：
                <el-input
                  v-model="indexLimitInput"
                  style="width: 90px"
                  size="small"
                  placeholder="请填写"
                />
              </div>
              <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                视图上限：
                <el-input
                  v-model="viewLimitInput"
                  style="width: 90px"
                  size="small"
                  placeholder="请填写"
                />
              </div>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: space-between; margin: auto; align-items: center;">
              <el-button style="width: 100px" size="mini" :disabled="queries.length === 0" type="success" @click="indexDialogVisible=true">索引建议</el-button>
              <el-button style="width: 100px" size="mini" :disabled="queries.length === 0" type="warning" @click="viewDialogVisible=true">视图建议</el-button>
            </div>
          </div>
        </div>
      </el-card>

    </div>

    <el-dialog
      title="索引建议"
      :visible.sync="indexDialogVisible"
      width="80%"
    >
      <div style="overflow: auto; height: 500px">
        <div v-for="(item, index) in sqlIndexSelections" :key="index" class="indexSuggestSetp" style="margin-top: 0">
          <div class="indexSuggestSetpTitle">
            {{ `${index+1}. ${item.table_name}创建索引` }}
          </div>
          <div class="sqlContainer">
            <div class="copyContainer">
              <div class="copy-to-clipboard" @click="handleCopy(item.query)">
                <el-tooltip class="item" effect="dark" content="复制SQL到剪贴板" placement="top-end">
                  <i class="el-icon-document-copy" />
                </el-tooltip>
              </div>
            </div>
            <highlightjs :code="sqlFormatter(item.query)" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="indexDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="indexDialogVisible = false">提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="视图建议"
      :visible.sync="viewDialogVisible"
      width="40%"
    >
      <span>视图建议</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="viewDialogVisible = false">提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="workloadForm.id ? '修改负载' : '添加负载'"
      :visible.sync="workloadDialogVisible"
      width="80%"
    >
      <el-form ref="workloadValidateForm" :model="workloadForm" label-width="60px" label-position="left">
        <el-form-item
          label="备注"
          prop="name"
          :rules="[{ required: true, message: '备注不能为空'}]"
        >
          <el-input v-model="workloadForm.name" style="width: 200px" size="mini" />
        </el-form-item>
      </el-form>

      <el-table
        :data="workloadForm.queries"
        :show-header="false"
        height="400"
        cell-class-name="table-column"
      >
        <el-table-column
          prop="query"
          label="语句"
          height="40px"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="workloadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="workloadSave">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import moment from 'moment'
import { format } from 'sql-formatter'
import { mysqlSlowSqlsInTimeQuantum, mysqlSlowSqls, mysqlServersSimpleInfo, sqlIndexSelection, mysqlWorkloadAdd, mysqlWorkloads, mysqlWorkloadUpdate } from
  '../../../api/api'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, LinesChart, BarChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  PolarComponent,
  GeoComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  DatasetComponent,
  BrushComponent
} from 'echarts/components'
import { default as VChart, THEME_KEY } from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  LinesChart,
  PieChart,
  GridComponent,
  PolarComponent,
  GeoComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  DatasetComponent,
  BrushComponent
])

export default {
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: 'light'
  },
  filters: {
    sqlFilter: function(value) {
      if (!value) {
        return ''
      }
      return value.length > 30 ? (value.slice(0, 30) + '...') : value
    }
  },
  data() {
    return {
      loading: false,
      sqlFormatter: format,
      dbSelecteds: [],
      keyParameter: [],
      dbSelectCondition: undefined,
      indexLimitInput: '',
      viewLimitInput: '',
      sqlsInput: '',
      queries: [],
      queriesHashData: [],
      indexDialogVisible: false,
      viewDialogVisible: false,
      sqlQueryChartOption: {
        title: { show: false },
        grid: {
          left: 60,
          top: 50,
          bottom: 50,
          right: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#1890FF'],
        legend: {
          data: ['慢查询数'],
          top: 0,
          right: 10,
          icon: 'roundRect',
          align: 'left',
          textStyle: {
            fontSize: 10
          }
        },
        brush: {
          xAxisIndex: 'all',
          brushLink: 'all',
          outOfBrush: {
            colorAlpha: 0.3
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          scale: true,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10,
            margin: 20
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '慢查询数',
            data: [],
            type: 'bar',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      sqlQueryCoordRangeStart: '',
      sqlQueryCoordRangeEnd: '',
      tableData: [],
      pageSize: 15,
      pageIndex: 1,
      totalItems: 0,
      analyseDialogVisible: false,
      analyseDialogLoading: false,
      analyseItem: {},
      dateSelectCondition: '',
      timeSelectCondition: ['', ''],
      analyseActionName: 'baseinfo',
      start_time: '',
      end_time: '',
      sqlIndexSelections: [],
      editQuery: '',
      activeName: 0,
      workloadForm: {
        name: '',
        id: '',
        queries: []
      },
      workloadData: [],
      workloadDialogVisible: false
    }
  },
  watch: {
    sqlQueryCoordRangeStart: {
      handler: function(val, oldval) {
        this.pageIndex = 1
        this.totalItems = 1
        this.getMysqlSlowSqls()
      }
    },
    sqlQueryCoordRangeEnd: {
      handler: function(val, oldval) {
        this.pageIndex = 1
        this.totalItems = 1
        this.getMysqlSlowSqls()
      }
    }
  },
  mounted() {
    this.dateSelectCondition = moment().format('YYYY-MM-DD')
    this.timeSelectCondition = [moment().add(-1, 'hours').format('HH:mm:ss'), moment().format('HH:mm:ss')]
    this.selecteTime()
    this.getMysqlServersSimpleInfo()
    this.startActions()
    this.workloads()
  },
  methods: {
    userWorkload(item) {
      this.workloadForm.id = item.id
      this.workloadForm.name = item.name
      this.queries = JSON.parse(JSON.stringify(item.queries))
      this.queriesHashData = []
      for (let i = 0; i < this.queries.length; i++) {
        this.queriesHashData.push(this.queries[i].query)
      }
    },
    onClickSaveWorkload() {
      this.workloadDialogVisible = true
      this.workloadForm.queries = JSON.parse(JSON.stringify(this.queries))
    },
    workloadSave() {
      this.$refs['workloadValidateForm'].validate((valid) => {
        if (valid) {
          if (this.workloadForm.id) {
            this.workloadUpdate()
          } else {
            this.workloadAdd()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    workloads() {
      mysqlWorkloads({}).then((res) => {
        const data = res.data
        for (let i = 0; i < data.length; i++) {
          const item = data[i]
          item.queries = JSON.parse(item.queries)
        }
        this.workloadData = data
      })
    },
    workloadAdd() {
      const queries = JSON.stringify(this.workloadForm.queries)
      const name = this.workloadForm.name
      mysqlWorkloadAdd({ name: name, queries: queries }).then(() => {
        this.workloadDialogVisible = false
        this.$message.success('添加成功')
        this.workloads()
      })
    },
    workloadUpdate() {
      const queries = JSON.stringify(this.workloadForm.queries)
      const name = this.workloadForm.name
      mysqlWorkloadUpdate({ workload_id: this.workloadForm.id, name: name, queries: queries }).then(() => {
        this.workloadDialogVisible = false
        this.$message.success('修改成功')
        this.workloads()
      })
    },
    getMysqlServersSimpleInfo() {
      mysqlServersSimpleInfo({}).then((res) => {
        this.dbSelecteds = res.data
        this.dbSelectCondition = this.dbSelecteds[0].id
      }).catch(() => {
      })
    },
    add(query) {
      if (this.queriesHashData.indexOf(query) >= 0) {
        this.$message.error('当前语句已被添加')
        return
      }
      this.queriesHashData.push(query)
      this.queries.push({ query: query })
    },
    addInputSal() {
      const sqls = this.sqlsInput.split(';')
      var errSqls = []
      for (let i = 0; i < sqls.length; i++) {
        const sql = sqls[i]
        if (this.queriesHashData.indexOf(sqls[i]) >= 0) {
          this.$message.error(`【${sql}】已经添加`)
          errSqls.push(sql)
          continue
        }
        if (sql) {
          this.queriesHashData.push(sql)
          this.queries.push({ query: sql })
        }
      }
      this.sqlsInput = errSqls.join(';')
    },
    deleteRow(index, rows) {
      const row = rows[index]
      this.queriesHashData.splice(this.queriesHashData.indexOf(row.query), 1)
      rows.splice(index, 1)
      if (this.queriesHashData.length === 0) {
        this.workloadForm = {
          name: '',
          id: '',
          queries: []
        }
      }
    },
    editRow(scope, rows) {
      scope._self.$refs[`edit-query-popover-${scope.$index}`].doShow()
      this.editQuery = rows[scope.$index].query
    },
    saveEditRow(index, rows) {
      rows[index].query = this.editQuery
      console.log(rows[index])
    },
    selecteTime() {
      this.start_time = `${this.dateSelectCondition} ${this.timeSelectCondition[0]}`
      this.end_time = `${this.dateSelectCondition} ${this.timeSelectCondition[1]}`

      this.getMysqlSlowSqlsInTimeQuantum()
    },
    indexSelection() {
      this.indexDialogVisible = true
      this.getSqlIndexSelection()
    },
    getSqlIndexSelection() {
      var data = []
      for (let i = 0; i < this.queries.length; i++) {
        const query = this.queries[i].query
        if (query) {
          data.push(query)
        }
      }
      sqlIndexSelection({ workload: JSON.stringify(data) }).then((res) => {
        this.sqlIndexSelections = res.result_list
      }).catch(() => {
      })
    },
    getMysqlSlowSqlsInTimeQuantum() {
      this.loading = true
      mysqlSlowSqlsInTimeQuantum({ server_id: 1, start_time: this.start_time, end_time: this.end_time }).then((res) => {
        this.loading = false
        const sqlTimeQuantumList = res.data
        // 实时SQL
        this.sqlQueryChartOption.xAxis.data = []
        this.sqlQueryChartOption.series[0].data = []
        for (let i = 0; i < sqlTimeQuantumList.length; i++) {
          this.sqlQueryChartOption.xAxis.data.push(moment(sqlTimeQuantumList[i]['time']).format('HH:mm:ss'))
          this.sqlQueryChartOption.series[0].data.push(sqlTimeQuantumList[i]['count'])
        }
        if (!this.sqlQueryCoordRangeStart) {
          this.sqlQueryCoordRangeStart = this.sqlQueryChartOption.xAxis.data[0]
          this.sqlQueryCoordRangeEnd = this.sqlQueryChartOption.xAxis.data[1]
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getMysqlSlowSqls() {
      this.loading = true
      const start_time = `${this.dateSelectCondition} ${this.sqlQueryCoordRangeStart}`
      const end_time = `${this.dateSelectCondition} ${this.sqlQueryCoordRangeEnd}`
      mysqlSlowSqls({ server_id: 1, start_time: start_time, end_time: end_time, page: this.pageIndex, page_size: this.pageSize }).then((res) => {
        this.loading = false
        this.tableData = res.data.data
        this.totalItems = res.data.count
      }).catch(() => {
        this.loading = false
      })
    },
    async curPageChange(page) {
      this.pageIndex = page
      this.getMysqlSlowSqls()
    },
    brushEnd(params) {
      this.sqlQueryCoordRangeStart = this.sqlQueryChartOption.xAxis.data[params.areas[0].coordRange[0] < 0 ? 0 : params.areas[0].coordRange[0]]
      this.sqlQueryCoordRangeEnd = this.sqlQueryChartOption.xAxis.data[params.areas[0].coordRange[1] >= this.sqlQueryChartOption.xAxis.data.length
        ? this.sqlQueryChartOption.xAxis.data.length - 1
        : params.areas[0].coordRange[1]]
    },
    startActions() {
      const sqlQueryChart = this.$refs.sqlQueryChart
      if (!sqlQueryChart) {
        return
      }
      sqlQueryChart.dispatchAction({
        type: 'brush',
        areas: [
          {
            brushType: 'lineX',
            coordRange: [0, 10],
            xAxisIndex: 0
          }
        ]
      })
    },
    handleCopy(value) {
      const that = this
      this.$copyText(value).then(function(e) {
        that.$message.success(' 已复制到剪贴板！')
        console.log(e)
      }, function(e) {
        that.$message.error('复制失败，请使用Ctrl+C复制')
        console.log(e)
      })
    }
  }
}

</script>

<style scoped>
  .container>>> .el-divider--horizontal{
    margin: 10px 0;
  }
  .index>>> .el-table td, .el-table th {
    padding: 2px 0;
  }
  .slowSqlTableCard >>> .el-card__body {
    height: calc(100% - 30px);
    padding: 10px;
  }
  .workloadCard >>> .el-card__body {
    height: 100%;
    padding: 10px;
  }
  .workload-el-collapse-item >>> .el-collapse-item__content {
    padding-bottom: 0;
  }

</style>

<style lang="scss" scoped>

  @import "../../../styles/vue-hljs-theme.css";
  @import "../../../styles/table.css";

  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .top-card-title {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
  }

  .top-card-detail {
    color: rgba(0, 0, 0, 0.85);
    font-weight: bolder;
    white-space: nowrap;
    word-break: break-all;
    font-size: 30px;
    line-height: 60px;
  }

  .card-header-title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    white-space: nowrap;
    word-break: break-all;
    font-size: 18px;
  }

  .el-divider--horizontal {
    margin: 20px 0;
  }

  .el-col-5 {
    width: 20%;
  }

  .sqlQueryChart {
    width: 100%;
    height: 30vh;
  }

  .report-list-container {
    height: 190px;
    width: 100%;
    overflow: auto;
  }

  .report-list-item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    color: rgba(0, 0, 0, 0.65);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .dialogSectionHeaderTitle {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .sqlContainer {
    width: 80%;
    background: #f5f5f5;
    border-radius: 4px;
    white-space: pre;
    padding: 0 10px;
    color: #000000;
    font-size: 1em;
    position: relative;
    text-align: left;
  }

  .copyContainer {
    position: absolute;
    right: 6px;
    top: 6px;
  }

  .el-icon-document-copy:hover {
    color: #409EFF;
  }

  .el-icon-document-copy:active {
    color: #000000;
  }

  .dialogSqlSlowQueryChart {
    width: 100%;
    height: 150px;
  }

  .ipChart {
    width: 100%;
    height: 200px;
  }

  .el-drawer:focus {
    outline: none;
  }

  .indexSuggestSetp {
    margin-top: 10px;
  }

  .indexSuggestSetpTitle {
    color: #666666;
    font-size: 10px;
    line-height: 30px;
  }

</style>
